<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<%-- <script src="${pageContext.request.contextPath}/js/jquery3.3.1.js"></script> --%>
<%-- <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet"> --%>
<%-- <link href="${pageContext.request.contextPath}/css/bootstrap-theme.min.css" rel="stylesheet"> --%>
<%-- <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script> --%>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/JS/jquery-1.11.0.min.js"></script>
 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <link href="${pageContext.request.contextPath }/css/flowersingle.css" rel="stylesheet" type="text/css" />
<title>Insert title here</title>
<style type="text/css">
.font_color{ 
color:#f73020;
}
</style>
</head>
<body>


<div id = "my_shopout" class = "" style = "z-index:1000;display:none;width:100%;height:1000px;background-color: rgba(0,0,0,0.4);
position:fixed;" >
	
	
	
	
	
<!-- 	修改头像，店名，三个图，简介 -->
<div id = "" class = "" style = "width:600px;height:600px;margin-left: 370px;margin-top: 10px;
background-color: white;border-radius:5px;">
	<nav style = "" class = "navbar navbar-inverse " role = "navigation">
		<div id = "" class = "">
		<div class="navbar-header">
	        <div class="navbar-brand" href="#" style = "color:#f73020;">编辑</div>
	    </div>
	    <div class="navbar-header">
	       <a onclick = "$('#my_shopout').css('display','none')"><div class="navbar-brand" href="#" style = "color:#f73020;">返回</div></a> 
	    </div>
		</div>
	</nav>	
	
	
<!-- 	表格开始 -->
	<form action="${pageContext.request.contextPath }/UpdateShopServlet" id = "shop_edit_form" method = "post" enctype="multipart/form-data">
	<div style = "height:430px;width:100%;overflow: scroll;">
	<table class = "table table-hover" >
	  <tr>
	    <td>
	    	<div id = "" class = "" style = "width:80px;height:80px;border-radius:50px;border:1px solid #f73020;">
	    		<img alt="" id = "shop_img0" src="${pageContext.request.contextPath }${shop.shophead }" style = "border-radius:50px;;width:100%;height:100%;">
	    	</div>
		</td>
	    <td><div id = "" class = "file_div" style = "border:1px solid red;width:350px;"><input type = "file" id = "" class = "" name = "shophead" onchange="showPreview0(this)"></div>
	    	<div  class = "font_color" style = "font-weight:bold;margin: 20px;">修改头像</div>
	    </td>
	  </tr>
	  <tr>
	    <td>
	    	<div  class = "shop_img_div" style = "width:170px;height:80px;">
	    		<img alt="" id = "shop_img1" src="${pageContext.request.contextPath }${shop.img1 }" style = "width:100%;height:100%;">
	    	</div>
	    </td>
	    <td><div id = "" class = "file_div"><input type = "file" id = "" class = "" name = "img1" onchange="showPreview1(this)"></div>
	    	<div id = "" class = "font_color" style = "font-weight:bold;margin: 20px;">修改简介图片1</div>
	    </td>
	  </tr>
	  <tr>
	    <td>
	    	<div  class = "shop_img_div" style = "width:170px;height:80px;">
	    		<img alt="" id = "shop_img2" src="${pageContext.request.contextPath }${shop.img2 }" style = "width:100%;height:100%;">
	    	</div>
	    </td>
	    <td><div id = "" class = "file_div"><input type = "file" id = "" class = "" name = "img2" onchange="showPreview2(this)"></div>
	    	<div id = "" class = "font_color" style = "font-weight:bold;margin: 20px;">修改简介图片2</div>
	    </td>
	  </tr>
	  <tr>
	    <td>
	    	<div class = "shop_img_div" style = "width:170px;height:80px;">
	    		<img alt="" id = "shop_img3"  src="${pageContext.request.contextPath }${shop.img3 }" style = "width:100%;height:100%;">
	    	</div>
	    </td>
	    <td><div id = "" class = "file_div"><input type = "file" id = "" class = "" name = "img3" onchange="showPreview3(this)"></div>
	    	<div id = "" class = "font_color" style = "font-weight:bold;margin: 20px;">修改简介图片3</div>
	    </td>
	  </tr>
	  <tr>
	  	<td colspan="2">
	  		<div class="col-lg-6">
                <div class="input-group">
                        <span class="input-group-btn">
                                <button class="btn btn-default font_color" type="button" >店名</button>
                        </span>
                        <input type="text" class="form-control" style = "width:470px;" name = "shopname" value = "${shop.shopname }">
                </div><!-- /input-group -->
            </div>
	  	</td>
	  </tr>
	  <tr>
	  	<td colspan="2">
	  		<div class="form-group">
			    <label for="name" class = "font_color">简介</label>
			    <textarea style = "width:570px;" class="form-control" rows="3" name = "shopdescribe">${shop.shopdescribe }</textarea>
			  </div>
	  	</td>
	  </tr>
	  
	  
	</table>
	</div><!-- 	表格结束 -->
	</form>
	
	 <div id = "" class = "" style = "padding: 5px;">
		 <button type="button" class="btn btn-default btn-lg btn-block font_color"
		  style = "margin-top: 10px;font-weight: bold;width:570px;" 
		 onclick = "$('#shop_edit_form').submit()">提交</button>
	 </div>

	

</div>
	
	
	
	
	
	
	
</div>

<script type="text/javascript">
    function showPreview0(source) {
        var file = source.files[0];
        if(window.FileReader) {
            var fr = new FileReader();
            fr.onloadend = function(e) {
                document.getElementById("shop_img0").src = e.target.result; //这个就是图片的流，可以直接展示到页面上
            };
            fr.readAsDataURL(file);
        }
    }
    function showPreview1(source) {
        var file = source.files[0];
        if(window.FileReader) {
            var fr = new FileReader();
            fr.onloadend = function(e) {
                document.getElementById("shop_img1").src = e.target.result; //这个就是图片的流，可以直接展示到页面上
            };
            fr.readAsDataURL(file);
        }
    }
    function showPreview2(source) {
        var file = source.files[0];
        if(window.FileReader) {
            var fr = new FileReader();
            fr.onloadend = function(e) {
                document.getElementById("shop_img2").src = e.target.result; //这个就是图片的流，可以直接展示到页面上
            };
            fr.readAsDataURL(file);
        }
    }
    function showPreview3(source) {
        var file = source.files[0];
        if(window.FileReader) {
            var fr = new FileReader();
            fr.onloadend = function(e) {
                document.getElementById("shop_img3").src = e.target.result; //这个就是图片的流，可以直接展示到页面上
            };
            fr.readAsDataURL(file);
        }
    }    
</script>

</body>
</html>